
<div class="mid-nav shadow-div">
    <div class="row">
        <div class="col-md-3 inner-center">
            <img src="{{imgPath}}{{merchant.mLogoPath}}"
                 class="m-logo img-circle">
        </div>
        <div class="col-md-9 content-title">
            <h3 ng-bind="merchant.mBrand">这里就是商家名</h3>
            <h5><i class="fa fa-phone" aria-hidden="true">&nbsp;&nbsp;</i>{{merchant.mTel}}</h5>
            <h5>商家地址：{{merchant.mLocation}}</h5>
        </div>
    </div>
</div>


<div class="mid-nav shadow-div" >
    <div class="row" style="min-height: 550px">


        <div class="col-md-3" ng-repeat="food in foods">
            <div class="thumbnail small-card">
                <img src="{{imgPath}}{{food.fViewPath}}" class="menu-img">
                <div class="caption">
                    <h3 ng-bind="food.fName"></h3>
                    <div class="row card-margin">
                        <div class="col-md-8">
                            <b class="price-font glyphicon glyphicon-yen"></b>
                            <b class="price-font" ng-bind="food.fPrice"></b>
                        </div>
                        <div class="col-md-4">
                            <!--update-->
                            <button type="button" class="btn add-btn hvr-wobble-to-bottom-right addcart" onclick="fly()" ng-click="addToCart($index)"><i class="glyphicon glyphicon-shopping-cart" style="color: #ffffff;"></i></button>
                            <!--update end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gold-bg">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped" style="table-layout: fixed; text-align: center;">
                    <thead>
                    <tr>
                        <th style="text-align: center;">菜名</th>
                        <th style="text-align: center;">数量</th>
                        <th style="text-align: center;">价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="c in cart">
                        <td>{{c.item.fName}}</td>
                        <td ng-bind="c.num"></td>
                        <td ng-bind="c.item.fPrice*c.num"></td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td>总计:</td>
                        <td></td>
                        <td>
                            <h3 id="order-total">{{sum}}</h3></td>
                    </tr>
                    <tr>
                        <td colspan="3" id="userLocation">配送地址：{{client.cLocation}}</td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-common hvr-wobble-vertical" data-dismiss="modal" ng-click="commitOrder()">Commit</button>
            </div>
        </div>
    </div>
</div>


<!--update-->
<div class="right-box" id="end">
    <a href="" ><h3>Your Cart</h3></a>
    <div id="infoMenu" class="">
        <!--update end-->
        <table style="width: 300px;table-layout: fixed;" class="table table-striped">
            <thead>
            <tr>
                <th>菜名</th>
                <th>数量</th>
                <th>价格</th>
            </tr>
            </thead>

            <tbody id="cartBody">
            <tr ng-repeat="c in cart">
                <td>{{c.item.fName}}</td>
                <td><input type="number" ng-change="changeFoodsNum($index,c.num)" ng-model="c.num"></td>
                <td ng-bind="c.item.fPrice*c.num"></td>
            </tr>
            </tbody>

            <tfoot>
            <tr>
                <td colspan="2">总计:</td>
                <td><h4 id="total">{{sum}}</h4></td>
            </tr>
            </tfoot>
        </table>
        <div class="checkout-box">
            <a>
                <button type="button" class="btn btn-black hvr-wobble-vertical"  ng-click="getClientInfo()"><span style="color: gold;">Check Out</span></button>
            </a>
        </div>
        <!--new-->
    </div>

</div>

<!--<a href="#top">-->
    <!--<div class="right-top-box">-->
        <!--<span class="glyphicon glyphicon-chevron-up back-icon"></span>-->
    <!--</div>-->
<!--</a>-->


<script>

    function fly(){
        var offset = $("#end").offset();  //结束的地方的元素

        var addcar = $(this);
        var flyer = $(' <button type="button" class="btn add-btn" style="width: 80px;height: 50px;"><i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i></button>');
        flyer.fly({
            start: {
                left: event.pageX+10,
                top: event.pageY
            },
            end: {
                left: offset.left+10,
                top: offset.top+10,
                width: 0,
                height: 0
            },
            onEnd: function(){
                addcar.css("cursor","default").removeClass('orange').unbind('click');
                this.destory();
            }
        });
    }

</script>
